<!-- 发票管理 -->
<!-- 发票管理 -->
<!-- 发票管理 -->

<template>
  <div>
    <myDivider name="发票管理"></myDivider>

    <!-- 顶部搜索 -->
    <div class="top">
      <el-date-picker @change="getTableList" value-format="yyyy-MM-dd" style="width: 250px;" v-model="typeTime"
        type="daterange" unlink-panels :range-separator="null" start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
      <el-input class="width1" v-model="keytitle" placeholder="输入关键字查询"></el-input>
      <el-input class="width1" v-model="keyResidentialName" placeholder="输入小区名称查询"></el-input>

      <el-button type="primary" @click="SouSuo">搜索</el-button>
      <el-button @click="reset">重置</el-button>
      <div class="add" style="margin-top: 10px;">
        <el-button type="primary" @click="AddClick">新增</el-button>
      </div>
    </div>

    <!-- 表格列表 -->
    <div class="tableBox">
      <el-table :data="tableData" style="width: 100%">
        
        <el-table-column align="center" prop="residentialName" label="小区名称" width="150">
        </el-table-column>
        <el-table-column align="center" prop="number" label="发票号码" width="150">
        </el-table-column>
        <el-table-column align="center" prop="buyerName" label="购买方名称" width="150">
        </el-table-column>
        <el-table-column align="center" prop="sellerName" label="销售方名称" width="150">
        </el-table-column>
        <el-table-column align="center" prop="serviceName" label="货物或应税劳务、服务名称" width="130">
        </el-table-column>
        <el-table-column align="center" prop="priceTaxSummation" label="价税合计" width="120">
        </el-table-column>
        <el-table-column align="center" prop="createUserName" label="经办人" width="120">
        </el-table-column>
        <el-table-column align="center" prop="invoicingDateStr" label="开票日期">
        </el-table-column>
        <el-table-column align="center" label="操作" width="180">
          <template slot-scope="scope">
            <!-- <div style="display: flex;margin-top: 10px;justify-content: space-between;">
              <el-button size="small" icon="el-icon-document" @click="BtnClick('detail', scope.row)"
                type="primary">详情</el-button>
              <el-button size="small" icon="el-icon-edit" @click="BtnClick('update', scope.row)"
                type="warning">修改</el-button>
              <el-button size="small" icon="el-icon-delete" type="danger"
                @click="BtnClick('delete', scope.row)">删除</el-button>
            </div> -->
            <div class="textBtn">
              <el-row>
                <el-col class="el" :span="8">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="BtnClick('detail', scope.row)">详情</span>
                </el-col>
                <el-col class="el" :span="8">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="BtnClick('update', scope.row)">修改</span>
                </el-col>
                <el-col class="el" :span="8">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="BtnClick('delete', scope.row)">删除</span>
                </el-col>
              </el-row>
            </div>

          </template>
        </el-table-column>
        <!-- <el-table-column prop="roomName" label="房间信息" width="200">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.roomName" placement="top-start">
              <span> {{
                scope.row.roomName.length > 8 ? '...' + scope.row.roomName.slice(scope.row.roomName.length - 8) :
                scope.row.roomName
              }}</span>
            </el-tooltip>
          </template> 
        </el-table-column> -->
      </el-table>
    </div>

    <!-- 分页器 -->
    <myPagination :pageSize="pageSize" :total="total" @PageChange="PageChange" @pageSizeChange="pageSizeChange">
    </myPagination>
    <!-- 所有弹窗 -->

  </div>
</template>

<script>
import axios from 'axios'
export default {

  data() {
    return {
      typeTime: [],
      keytitle: '',
      keyResidentialName: '',
      // 分页器
      total: 1,
      pageNum: 1,
      pageSize: 10,
      tableData: [],
    }
  },
  async activated() {
    this.typeTime = ['', '']
    this.keytitle = ''
    this.keyResidentialName = ''
    this.getTableList()
  },
  deactivated() {

  },
  methods: {
    async BtnClick(type, row) {
      console.log(row, '所在行');
      switch (type) {
        case 'detail':
          this.$router.push(`/invoice/invoiceDetail?id=${row.id}`)
          break
        case 'update':
          this.$router.push(`/invoice/invoiceAdd?scene=update&id=${row.id}`)
          break
        case 'delete':
          this.$confirm('此操作将会删除此发票, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {

            let res = await this.$api.message.mydeleteLogice(row.id)
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getTableList()
            } else {
              this.$message.error(res.message)
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });

          break
      }
    },

    AddClick() {
      this.$router.push('/invoice/invoiceAdd?scene=add')
    },
    async getTableList() { // 获取表格列表
      if (this.typeTime == null) {
        this.typeTime = ['', '']
      }
      let user = JSON.parse(sessionStorage.getItem('logOnUser'))
      let res = await this.$api.message.myInvoiceList({
        "unitType": user.unitType, //单位分类，机关:agency 机构:company  系统system
        "unitId": user.unitId, //单位id  系统传0
        "residentialName": this.keyResidentialName, //小区名称
        "timeStart": this.typeTime[0], //起始时间
        "timeEnd": this.typeTime[1], //结束时间
        "keywords": this.keytitle, //关键字
        "pageSize": this.pageSize,
        "pageNum": this.pageNum
      })
      if (res.code == 200) {
        if (res.data.list.length < 1 && this.pageNum != 1) { //判断，当搜索关键字有内容时，我直接点击分页，会造成关键词列表中没有某某页的数据，那么我就用第一页重新请求一次
          this.pageNum = 1
          this.getTableList()
          return
        }
        this.tableData = res.data.list
        this.total = res.data.total
      } else {
        this.$message.error(res.message)
      }

    },
    SouSuo() {
      this.pageNum = 1
      this.getTableList()
    },
    reset() {
      this.typeTime = ['', '']
      this.keytitle = ''
      this.keyResidentialName = ''
      this.pageNum = 1
      this.getTableList()
    },
    pageSizeChange(e) { //分页器——每页数量变化
      this.pageNum = 1
      this.pageSize = e
      this.getTableList()
    },
    PageChange(e) {//分页器——页数变化
      this.pageNum = e
      this.getTableList()
    },
  },
}
</script>

<style lang="less" scoped>
.textBtn {
  position: relative;

  /deep/ .el-row {
    display: flex;
    justify-content: center;
  }

  .el {
    display: block;
    position: relative;

    &:nth-child(n+2) {
      &::after {
        position: absolute;
        left: -1px;
        top: 50%;
        content: '';
        width: 2px;
        transform: translateY(-50%) scale(0.5, 1);
        height: 10px;
        background-color: #aaa;
      }
    }
  }
}

.width1 {
  width: 200px;
}



.top {
  width: 100%;
  padding: 20px 30px;
  box-sizing: border-box;
  position: relative;

  // .add {
  //   position: absolute;
  //   right: 20px;
  //   top: 50%;
  //   transform: translateY(-50%);
  // }
}



.tableBox {
  margin-top: 50px;

  /deep/ .el-table {
    .has-gutter {
      .is-leaf {}
    }
  }

}
</style>